<template>
    <div class="addid-from">
      <TitleHeader name="添加账号"></TitleHeader>
      <p><span style="margin-left: 16px">账号</span><el-input v-model="account" style="width: 400px"></el-input></p>
      <p><span style="margin-left: 16px">密码</span><el-input v-model="psd" show-password style="width: 400px" ></el-input></p>
      <p><span>用户组</span><el-select v-model="checked" placeholder="请选择" style="width: 400px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
      </p>
      <p class="addid-btn"><el-button type="primary" @click="useradd">添加</el-button><el-button @click="reverse">重置</el-button></p>
    </div>
</template>

<script>
import TitleHeader from '../../../components/TitleHeader';
import { adduser } from "@/apis/user";
export default {
  data() {
    return {
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        }
      ],
      checked: "普通管理员",
      account: "",
      psd: "",
    };
  },
  methods:{
      useradd(){
          this.$confirm('是否添加该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        adduser({account:this.account,password:this.psd,userGroup:this.checked}).then((res)=>{
        if(res.data.code==0){
          this.$message({
          message: '臭臭世界系统提示:账号添加成功!',
          center: true,
          type:'success'
           });
           this.reverse()

        }
      })
        }).catch(() => {
          this.$message({
          message: '臭臭世界系统提示:取消成功!',
          center: true,
          type:'success'
           });         
          });
        },
      reverse(){
         this.checked= "普通管理员";
         this.account= "";
         this.psd= "";
     }

  },
  components:{
    TitleHeader,
  }
};
</script>

<style lang="less" scoped>

.addid-from {
  background: #fff;
  
  p {
    margin-bottom: 20px;
    padding: 0 60px;
    span {
      margin-right: 10px;
    }
  }
  .addid-btn {
    padding-left: 118px;
  }
}
</style>